<template>
  <div class="app-container">
    <el-table ref="multipleTable" border :data="tableData" :span-method="objectSpanMethod" 
        @cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter" :cell-class-name="tableRowClassName">
      <el-table-column label="商品类别" align="center">
        <template slot-scope="scope" width="160">
            <div>{{scope.row.productType}}</div>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" width="180px" align="center">
        <template slot-scope="scope">
          <p>{{scope.row.productName}}</p>
        </template>
      </el-table-column>
      <el-table-column label="商品价格" align="center">
        <template slot-scope="scope">
          <p>{{scope.row.price}}</p>
        </template>
      </el-table-column>
      <el-table-column label="购物车" align="center">
        <template slot-scope="scope">
          <p>{{scope.row.amount}}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作人员" align="center">
        <template slot-scope="scope">
          <p>{{scope.row.operator}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间" align="center"/>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'tool',
  data() {
    return {
      //表格数据列表
      tableData: [
        {
          operate_number: "20180831142020",
          productType: "纺织品",
          productName: '男装上衣',
          price: "31.00",
          amount: 20,
          operator: "小吴",
          updateTime: "2018-08-31",
        },{
          operate_number: "20180831142020",
          productType: "纺织品",
          productName: '男装裤子',
          price: "32.00",
          amount: 21,
          operator: "小吴",
          updateTime: "2018-08-31",
        },{
          operate_number: "20180823142020",
          productType: "饮料",
          productName: '康师傅冰红茶',
          price: "33.00",
          amount: 22,
          operator: "小吴",
          updateTime: "2018-08-31",
        },{
          operate_number: "20180821142020",
          productType: "纺织品",
          productName: '男装裤子',
          price: "34.00",
          amount: 13,
          operator: "小王",
          updateTime: "2018-08-31",
        },{
          operate_number: "20180821142020",
          productType: "绸缎",
          productName: '旗袍',
          price: "35.00",
          amount: 200,
          operator: "小吴",
          updateTime: "2018-08-31",
        },{
          operate_number: "20180821142020",
          productType: "绸缎",
          productName: '席子',
          price: "36.00",
          amount: 24,
          operator: "小吴",
          updateTime: "2018-08-31",
        },
      ],
      rowIndex: '-1',
      orderIndexArr: [],
      hoverOrderArr: [],
    }
  },
  created() {

  },
  mounted() {
    this.getOrderNumber();
  },
  methods: {
    // 获取相同编号的数组
    getOrderNumber() {
      let orderObj = {}
      let productObj = {}
      this.tableData.forEach((element, index) => {
        // console.log(element, 'element', index)
        element.rowIndex = index
        if (orderObj[element.operate_number]) {
          orderObj[element.operate_number].push(index)
        } else {
          orderObj[element.operate_number] = []
          orderObj[element.operate_number].push(index)
        }
      })
      // 将数组长度大于1的值 存储到this.orderIndexArr（也就是需要合并的项）
      for (let k in orderObj) {
        if (orderObj[k].length > 1) {
          this.orderIndexArr.push(orderObj[k])
        }
      }
    },
    // 合并单元格
    objectSpanMethod({row,column,rowIndex,columnIndex}) {
      // if条件控制那列需要合并的下标，默认从0开始
      if (columnIndex === 0 || columnIndex === 4 || columnIndex === 5) {
        for (let i = 0; i < this.orderIndexArr.length; i++) {
          let element = this.orderIndexArr[i]
          for (let j = 0; j < element.length; j++) {
            let item = element[j]
            if (rowIndex == item) {
              if (j == 0) {
                return {
                  rowspan: element.length,
                  colspan: 1
                }
              } else if (j != 0) {
                return {
                  rowspan: 0,
                  colspan: 0
                }
              }
            }
          }
        }
      }
    },
    // 单元格样式
    tableRowClassName({row,rowIndex}) {
      let arr = this.hoverOrderArr
      for (let i = 0; i < arr.length; i++) {
        if (rowIndex == arr[i]) {
          return 'hovered-row'
        }
      }
    },
    //鼠标划入效果
    cellMouseEnter(row, column, cell, event) {
      this.rowIndex = row.rowIndex;
      this.hoverOrderArr = [];
      this.orderIndexArr.forEach(element => {
        if (element.indexOf(this.rowIndex) >= 0) {
          this.hoverOrderArr = element
        }
      })
    },
    //鼠标划出效果
    cellMouseLeave(row, column, cell, event) {
      this.rowIndex = '-1'
      this.hoverOrderArr = [];
    },
    //修改按钮
    handleEdit(row) {

    },
    //删除按钮
    handleDelete(row) {

    }
  }
};
</script>

<style lang="scss" scoped>
.el-table {
  ::v-deep .hovered-row {
    background: #f5f7fa;
  }
}
</style>